<template>
  <!-- 右侧老师初始配置 -->
  <div class="information-container" >

    <div class="teacher-top">初始配置</div>
    
    <!-- 下拉菜单 -->
    <div class="menu-container">
      <button class="menu-show" @click="menuShow=!menuShow">
        {{Grade}}班级
        <i class="el-icon-arrow-down" style="font-size: 1.2rem;"></i>
      </button>
      <div v-if="menuShow" class="menu-not-show"  @mouseenter="menuShow=true" @mouseleave="menuShow=false">
        <button :key="index" v-for="(item,index) in GradeList" @click="GradeName(index,item)" class="menu-each" :class="{menuEachShow:index == curIndex}">{{item}}班级</button>
      </div>
    </div>

    <!-- 信息栏 -->
    <div v-if="divShow">
      <div class="information-bar" :key="key" v-for="(value,key) in teacherlist" >
        <div class="left-text">{{value.subjectName}}老师</div>
        <div class="right-text">
          <div v-show="!information">{{value.nickName}}</div>
          <menuSelect :Data="(value)" v-show="information"></menuSelect>
        </div>
      </div>
    </div>

    <div class="bottom-button">
      <button class="button-click" v-if="!information" @click="((information=!information),removeItem())">调整</button>
      <button class="button-click" v-if="information" @click="submit()">确定</button>
    </div>
  </div>
</template>

<script>
import { SubjectTeacher, changeGradeTeacher, GradeTeacher, LeadGrade } from "@/api/myInfoTeacher/teacherconfig"
import menuSelect from './menuSelect'

export default {
  components: {
    menuSelect
  },

  data() {
    return {
      Grade: '',            // 下拉菜单默认班级
      GradeList: [],        // 下拉菜单班级列表
      curIndex: 0,          // 下拉菜单点击效果
      menuShow: false,      // 下拉菜单隐藏菜单

      information:false,    // 调整确定唯一存在
      teacherlist:[],       // 初始遍历效果
      subjectNameList: [],  // 本地存储
      teacher:{},           // 本地存储获取数据

      divShow:true          // 重新渲染老师信息
    }
  },

  mounted() {
    
    // this.getmyInfo()
    this.getLeadGrade()
    // this.getGradeList()
  },

  methods: {
    // 修改下拉菜单，并重新渲染
    GradeName(index, item){
      this.curIndex = index
      this.Grade = this.GradeList[index]
      this.getGradeTeacher(item)
    },

    // 提交修改
    submit() {
      Promise.all([
        this.getLocalStorage()
      ]).then(res => {
        this.getchangeGradeTeacher(this.teacher)
        this.information=!this.information
        localStorage.clear()
      })
    },

    // 获取localStorage
    getLocalStorage() {
      // console.log(this.subjectNameList)
      for (const key in this.subjectNameList) {
        let result = JSON.parse(localStorage.getItem(this.subjectNameList[key].subjectName))
        if (result != null) {
          // console.log(result.subjectName, 'subjectName')
          // 向this.teacher添加存储对象
          this.$set(this.teacher, result.subjectName, result.userId)
        }
      }
      // console.log(this.teacher, 'teacher')
    },
    // 清空localStorage
    removeItem() {
      for (const key in this.subjectNameList) {
        localStorage.removeItem(this.subjectNameList[key].subjectName)
      }
    },

    // 获取担任班主任的班级
    async getLeadGrade() {
      this.Grade = []
      this.GradeList = []

      const res = await LeadGrade();
      // console.log(res, 'LeadGrade')

      if (res.data == undefined) {
        this.$message.error("数据库错误请检查");
      } else if (res.data.length == 0) {
        this.$message("您不是班主任");
      } else {
        for (const key in res.data) {
          // console.log(res.data[key], 'key')
          this.GradeList.push(res.data[key]);
        }
        this.Grade = this.GradeList[this.GradeList.length - 1];
        // console.log(this.Grade, 'Grade')
        // console.log(this.GradeList, 'GradeList')
        this.getGradeTeacher(this.Grade)
      }
    },

    // 修改班级的任课教师
    async getchangeGradeTeacher(teacherData) {
      const data = {
        gradeId: this.Grade,
        teacher: teacherData
      }
      console.log(data)
      const res = await changeGradeTeacher(data)
      console.log(res, 'changeGradeTeacher')
      this.getGradeTeacher(this.Grade)
    },

    // 获取班级教师配置
    async getGradeTeacher(gradeId) {
      const res = await GradeTeacher(gradeId)
      // console.log(res, 'GradeTeacher')
      this.teacherlist = res.data
      // console.log(this.teacherlist, 'teacherlist')
      for (const key in res.data) {
        this.subjectNameList.push({subjectName: res.data[key].subjectName})
      }
      this.divShow=false
      this.$nextTick(function() { this.divShow=true })
    },
  },



}

</script>


<style scoped>
/* 右侧个人信息 */
.information-container {
  display: flex;
  width: 100%;
  margin: 2.5rem 0;
  flex-direction: column;
  border: 1px solid rgba(245, 245, 245, 1);
}

.teacher-top {
  margin: 0.5rem;
  font-size: 2rem;
  align-items: center;
  flex-direction: column;
  display: flex;
}

/* 信息栏 */
.information-bar {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 3.125rem;
  margin: .0625rem .125rem;
  border-radius: 5px;
  align-items: center;
  border: 1px solid rgba(245, 245, 245, 1);
}

/* 左侧信息 */
.left-text {
  margin: .625rem 1.875rem;  
  font-size: 1.25rem;
  color: #101010;
}

/* 右侧信息 */
.right-text {
  right: 0;
  display: flex;
  color: #999999;
  flex-direction: row;
  position: absolute;
  margin: .625rem 1.875rem;  
  align-items: center;
  background: #fff;
  padding: .3125rem;
  border-radius: 5px;
}

/* 下拉菜单 */
.menu-container {
  margin: 1rem 1.5rem;
}

/* 下拉菜单显示样式 */
.menu-show {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color:#888;
  border: 0;
  background: #fff;
  font-size: 1.2rem;
}
/* 下拉菜单内容 */
.menu-not-show {
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: 5px;
  z-index: 3;
  color:#888888;
  
  border: 2px solid #101010;
  background: #f7f8fa;
}
.menu-each {
  border: 0;
  background:#fff;
  font-size: 1.2rem;
  padding: 0.5rem 0.75rem;
}
.menuEachShow {
  color: #fff;
  font-size: 1.2rem;
  background: #7c0000;
}
.bottom-button{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  bottom: -5rem;
}
.button-click {
  border: 0;
  background:  #7c0000;
  color: #fff;
  padding: 1rem 5rem;
  display: flex;
  justify-items: center;
  align-items: center;  
  border-radius: 2rem;
}
</style>